<template>
    <div class="admin_user_device_index">
        <div class="row">
            <div class="col-xs-12">
                <data-table class="box" :class="'box-'+theme" :options="options" ref="table">

                    <template slot="sizer-more" slot-scope="props">
                        <div class="row" >
                            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 sizer-item">
                                <select2 v-model="props.where['status']"
                                            :default-options="props.maps['status']"
                                            placeholder-show="设备状态"
                                            :placeholder-value="''"
                                            :is-ajax="false" >
                                </select2>
                            </div>
                        </div>
                    </template>

                    <template slot="col" slot-scope="props">
                        <span v-if="props.k =='user_id'">
                            [ID:{{props.row.user_id}}] {{props.row.user.mobile_phone}}
                        </span>
                    </template>
                </data-table>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState, mapActions, mapMutations, mapGetters} from 'vuex';
    export default {
        components:{
            'data-table':()=>import(/* webpackChunkName: "common_components/datatable.vue" */ 'common_components/datatable.vue'),
            "select2":()=>import(/* webpackChunkName: "common_components/select2.vue" */ 'common_components/select2.vue'),
            "icheck":()=>import(/* webpackChunkName: "common_components/icheck.vue" */ 'common_components/icheck.vue'),
            "el-button": ()=>import(/* webpackChunkName: "element-ui/lib/drawer" */ 'element-ui/lib/button'),
        },
        props: {
        },
        data(){
            return {
                options:{
                    lang_table:'user_device', //字段翻译
                    id:'data-table', //多个data-table同时使用时唯一标识
                    url:'', //数据表请求数据地址
                    // operation:true, //操作列
                    // checkbox:true, //选择列
                    btnSizerMore:false, //更多筛选条件按钮
                    keywordKey:'user.mobile_phone', //关键字查询key
                    keywordGroup:false, //是否为选项组
                    keywordPlaceholder:()=>{
                        return '请输入用户手机号(类)';
                    },
                    primaryKey:'id', //数据唯一性主键
                    defOptions:null, //默认筛选条件
                    fields: {id:{name:"ID",order:true},user_id:{name:"用户",order:true},device_sn:{name:"设备编号",order:true},status:{name:'设备状态',order:true,type:'label'},created_at:{name:"创建时间",order:true,type:"time"}}
                }
            };
        },
        computed:{
            ...mapState([
                'use_url',
                'theme'
            ])
        },
        methods:{

        }
    };
</script>
<style lang="scss" scoped>


</style>
